<template>
  <view>
    <!--卡片轮播图开始-->
    <swiper :style="'height: '+bannerHeight+' !important;'" class="card-swiper" :class="style" :indicator-dots="true" :circular="true"
     :autoplay="true" interval="5000" duration="500" indicator-color="#8799a3"
		 indicator-active-color="#0081ff">
     <swiper-item v-for="(item,index) in list" style="padding:10upx 0upx 40upx;" :key="index" @click="jumpPage" :data-jumpUrl="item.jumpUrl" :data-jumpType="item.jumpType" :class="cardCur==index?'cur':''">
     	<view class="swiper-item" >
     		<image :src="item.url"  mode="scaleToFill" v-if="item.type=='image'"></image>
     		<video :src="item.url"  autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
     	</view>
     </swiper-item>
    </swiper>
    <!--卡片轮播图结束-->
  </view>
</template>

<script>
  export default{
    data(){
      return {
        bannerHeight:'220upx',
        style:'square-dot',//square-dot、round-dot
        list: [],
        cardCur:0,
      }
    },
    props:{
      dotStyle:{
        type:String
      },
      height:{
        type:String,
        default(){
          return uni.upx2px(200)+'px';
        }
      },
      swiperList:{
        type:Array
      }
    },
    mounted() {
      this.style=this.dotStyle
      this.list=this.swiperList
       this.bannerHeight=uni.upx2px(this.height)+'px'
       this.bannerPadding=uni.upx2px(this.padding)+'px'
    },
    watch: {
      swiperList:{
        handler(newValue, oldValue) {  
          this.list=newValue;
        },
        deep:true
      }
    },
    methods:{
      jumpPage:function(e) {
        var jumpType=e.currentTarget.dataset.jumptype;
        var jumpurl=e.currentTarget.dataset.jumpurl;
        if(jumpurl!=null&&jumpurl!=""){
          if(jumpType==1){
           uni.redirectTo({
           	url:jumpurl,
           })
          }else{
            uni.navigateTo({
            	url:jumpurl,
            })
          }
        }
      }
    }
  }
</script>
<style>
  .screen-swiper{min-height: 50upx;}
</style>
